<template>
	<div>
		<!-- header  -->
		<view class="e-font-30 header e-flex-y">
			<e-navbar autoBack bg-color="transparent" leftIconColor="white" :titleStyle="{ color: 'white' }"></e-navbar>
			<e-status-bar bg-color="transparent"></e-status-bar>
			<view style="height: 120rpx;"></view>
			<view class="e-flex-x e-p-20" style="align-items: center;">
				<e-avatar :defaultUrl="$staticPath('default-headerImg.png')" :src="$fullLink('')"
					size="100rpx"></e-avatar>
				<text class="username e-m-l-20">user info</text>
			</view>
		</view>


		<view class="card wallet-card" style="margin-top: -120rpx;">
			<view class="" style="display: grid;grid-template-columns: repeat(2,2fr);">
				<view class="stat e-m-b-30">
					<text class="gray">可用余额</text>
					<view>
						<text class="num">1890.99</text>
					</view>
				</view>
				<view class="e-flex-x">
					<view class="e-flex-1">
						<e-button size="small" type="primary" color="#E4423B" shape="circle" :text="$t('提现')"
							@click="confirm" :throttleTime="1000"></e-button>
					</view>
					<view class="e-flex-1 e-m-l-10">
						<e-button size="small" type="info" color="white" :customStyle="{color:'red'}" shape="circle"
							:text="$t('充值')" @click="confirm" :throttleTime="1000"></e-button>
					</view>
				</view>
				<view class="stat">
					<text class="gray">出/寄售总收入</text>
					<view>
						<text class="num">1679.78</text>
					</view>
				</view>
				<view class="stat">
					<text class="gray">冻结资金</text>
					<view>
						<text class="num">23979.19</text>
					</view>
				</view>
			</view>
		</view>

		<view class="card stock-card e-m-t-20">
			<view class="title-bar e-flex-x" style="align-items: center;">
				<text class="label e-flex-1">库存管理</text>
				<view class="e-flex-x" style="align-items: center;">
					<text class="more">详情</text>
					<image class="icon-more" :src="$staticPath('arrow_right.png')" mode=""></image>
				</view>
			</view>

			<view @tap="jump('/pages/bargain/user/stock/list')" class="e-m-t-30" style="display: grid;grid-template-columns: repeat(2,2fr);">
				<view class="stat e-m-b-30">
					<text class="gray">总商品数量</text>
					<view>
						<text class="num">18</text>
					</view>
				</view>
				<view class="stat e-m-b-30">
					<text class="gray">出/寄售中数量</text>
					<view>
						<text class="num">2</text>
					</view>
				</view>
				<view class="stat e-m-b-30">
					<text class="gray">当日购买数量</text>
					<view>
						<text class="num">4</text>
					</view>
				</view>
				<view class="stat e-m-b-30">
					<text class="gray">当日成功出/寄售数量</text>
					<view>
						<text class="num">6 </text>
					</view>
				</view>
			</view>

		</view>



		<view class="function-card e-m-t-20 card">
			<view class="title-bar e-flex-x" style="align-items: center;">
				<text class="label e-flex-1">我的服务</text>
			</view>

			<view class="e-m-t-30" style="display: grid;grid-template-columns: repeat(4,1fr);">
				<view class="func-item" @tap="jump('/pages/bargain/user/list/deal')">
					<image src="../static/icons/chengjiaochaxun.png" class="icon" mode=""></image>
					<text>成交查询</text>
				</view>
				<view class="func-item" @tap="jump('/pages/bargain/user/list/onsale')">
					<image src="../static/icons/jishouchaxun.png" class="icon" mode=""></image>
					<text>出/寄售查询</text>
				</view>
				<view class="func-item" @tap="jump('/pages/bargain/user/list/pickup')">
					<image src="../static/icons/tihuochaxun.png" class="icon" mode=""></image>
					<text>提货查询</text>
				</view>
				<view class="func-item">
					<image src="../static/icons/zijinmingxi.png" class="icon" mode=""></image>
					<text>资金明细</text>
				</view>
				<view class="func-item">
					<image src="../static/icons/tixianmingxi.png" class="icon" mode=""></image>
					<text>提现明细</text>
				</view>
				<view class="func-item" @tap="jump('/pages/bargain/user/stock/list')" >
					<image src="../static/icons/shengqingjishou.png" class="icon" mode=""></image>
					<text>申请出/寄售</text>
				</view>
				<view class="func-item" @tap="jump('/pages/bargain/user/stock/list')" >
					<image src="../static/icons/shenqingtihuo.png" class="icon" mode=""></image>
					<text>提货申请</text>
				</view>
			</view>
		</view>
	</div>
</template>

<script setup>
	import {
		routeJump
	} from '../../../common/utils';



	const jump = (url, params) => {
		routeJump(url, "navigateTo")
	}
</script>

<style lang="scss" scoped>
	.header {
		background: #E4423B;
		color: white;
		background-image: url("../static/bargain-user-bg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		min-height: 400rpx;
	}

	.card {
		border-radius: 20rpx;
		margin: auto;
		background-color: white;
		padding: 30rpx;
		margin: 0 20rpx;
	}

	.wallet-card {
		background: linear-gradient(179deg, #FFE7E6 0%, #FFE7E6 30%, #FFFFFF 100%);
	}

	.gray {
		height: 34rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.num {
		height: 44rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
	}

	.stat {}

	.icon-more {
		width: 32rpx;
		height: 32rpx;
	}

	.title-bar {
		.label {
			height: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
		}

		.more {
			height: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #B3B3B3;
			line-height: 34rpx;
			text-align: center;
			font-style: normal;
		}
	}

	.function-card {
		.func-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			text {
				height: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 34rpx;
				text-align: right;
				font-style: normal;
			}

			.icon {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>